<template>
  <view>
    <view style="width: 90%">
      <u--form labelWidth="90" labelAlign="center" :model="privatesea" :rules="rules" ref="uForm">
        <u-form-item label="昵称" prop="nickname" class="item">
          <u--input v-model="privatesea.nickname" placeholder="请填写昵称"></u--input>
        </u-form-item>
        <u-form-item label="邮箱" prop="email" class="item">
          <u--input v-model="privatesea.email" placeholder="请填写邮箱"></u--input>
        </u-form-item>
        <!-- 手机号 -->
        <u-form-item label="手机号" prop="mobile" class="item">
          <u--input v-model="privatesea.mobile" placeholder="请填写手机号码"></u--input>
        </u-form-item>
        <!-- 密码 -->
        <u-form-item label="密码" prop="password" class="item">
          <u--input type="password" v-model="privatesea.password" placeholder="如若需修改密码请输入，否则留空"></u--input>
        </u-form-item>
        <!-- 性别 -->
        <u-form-item label="性别" prop="sex" borderBottom @click="showSex = true" ref="item1">
          <u--input v-model="privatesea.sex" disabled disabledColor="#ffffff" placeholder="请选择性别"
            border="none"></u--input>
          <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item>
        <!-- 认证状态 -->
        <u-form-item label="认证状态" prop="status" borderBottom @click="showStatus = true" ref="item1">
          <u--input v-model="privatesea.status" disabled disabledColor="#ffffff" placeholder="请选择认证状态"
            border="none"></u--input>
          <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item>
        <!-- 金额 -->
        <u-form-item label="金额" prop="money" class="item">
          <u--input v-model="privatesea.money" placeholder="请填写金额"></u--input>
        </u-form-item>
        <!-- 客户来源 -->
        <u-form-item label="客户来源" prop="source" borderBottom @click="showSource = true" ref="item1">
          <u--input v-model="privatesea.source" disabled disabledColor="#ffffff" placeholder="请选择客户来源"
            border="none"></u--input>
          <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item>
        <!-- 成交状态 -->
        <u-form-item label="成交状态" prop="auth" borderBottom @click="showAuth = true" ref="item1">
          <u--input v-model="privatesea.auth" disabled disabledColor="#ffffff" placeholder="请选择成交状态"
            border="none"></u--input>
          <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item>
        <!---省市区 -->
        <u-form-item label="省市区" prop="address" borderBottom @click="showAddress" ref="item1">
          <u--input v-model="privatesea.address" disabled disabledColor="#ffffff" placeholder="请选择省市区"
            border="none"></u--input>
          <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item>
      </u--form>

      <!-- 选择框 -->
      <!-- 性别 -->
      <u-action-sheet :show="showSex" :actions="sexList" title="请选择性别" @close="showSex = false" @select="sexSelect">
      </u-action-sheet>
      <!-- 认证 -->
      <u-action-sheet :show="showStatus" :actions="statusList" title="请选择认证状态" @close="showStatus = false"
        @select="statusSelect">
      </u-action-sheet>
      <!-- 客户来源 -->
      <u-action-sheet :show="showSource" :actions="sourceList" title="请选择客户来源" @close="showSource = false"
        @select="sourceSelect">
      </u-action-sheet>
      <!-- 成交状态 -->
      <u-action-sheet :show="showAuth" :actions="authList" title="请选择成交状态" @close="showAuth = false"
        @select="authSelect">
      </u-action-sheet>
      <!-- 省市区 -->
      <cityPicker :column="column" :default-value="defaultValue" :mask-close-able="maskCloseAble" @confirm="confirm"
        @cancel="cancel" :visible="visible" />
    </view>
    <u-button type="warning" icon="pushpin-fill" @click="onSubmit" :customStyle="btnStyle">添加</u-button>
    <u-toast ref="uToast"></u-toast>
  </view>
</template>
<script>
import cityPicker from "@/components/piaoyi-cityPicker/piaoyi-cityPicker";

export default {
  data() {
    return {
      // 省市区部分弹出开关
      visible: false,
      // 省市区部分
      column: 3, // 几列
      maskCloseAble: true,
      // 存放地区码
      defaultValue: "",
      // 当前登录用户信息
      admin: "",
      // 表单
      privatesea: {
        sex: "",
        status: "",
        source: "",
        auth: "",
        address: "",

        // 需要传送的数据
        nickname: "",
        email: "",
        mobile: "",
        password: "",
        money: "",
        sexid: 0,
        statusid: 0,
        sourceid: 0,
        authid: 0,
      },
      // 弹出选择开关
      showSex: false,
      showStatus: false,
      showSource: false,
      showAuth: false,
      // 选择列表
      sexList: [
        {
          name: "男",
          value: 1,
        },
        {
          name: "女",
          value: 2,
        },
        {
          name: "保密",
          value: 0,
        },
      ],
      statusList: [
        {
          name: "已认证",
          value: 1,
        },
        {
          name: "未认证",
          value: 0,
        },
      ],
      sourceList: [],
      authList: [
        {
          name: "已成交",
          value: 1,
        },
        {
          name: "未成交",
          value: 0,
        },
      ],
      // 验证表单数据
      rules: {
        nickname: {
          type: "string",
          required: true,
          message: "请输入昵称",
          trigger: ["change", "blur"],
        },
        email: {
          type: "email",
          required: true,
          message: "请输入邮箱",
          trigger: ["change", "blur"],
        },
        mobile: {
          type: "number",
          required: true,
          message: "请输入手机号",
          trigger: ["change", "blur"],
        },
        password: {
          type: "string",
          required: true,
          message: "请输入密码",
          trigger: ["change", "blur"],
        },
        sex: {
          type: "string",
          required: true,
          message: "请选择性别",
          trigger: ["change", "blur"],
        },
        status: {
          type: "string",
          required: true,
          message: "请选择认证状态",
          trigger: ["change", "blur"],
        },
        money: {
          type: "number",
          required: true,
          message: "请输入金额",
          trigger: ["change", "blur"],
        },
        source: {
          type: "string",
          required: true,
          message: "请选择客户来源",
          trigger: ["change", "blur"],
        },
        auth: {
          type: "string",
          required: true,
          message: "请选择成交状态",
          trigger: ["change", "blur"],
        },
        address: {
          type: "string",
          required: true,
          message: "请选择省市区",
          trigger: ["change", "blur"],
        },
      },
      // 按钮样式
      btnStyle: {
        marginTop: "10px",
      },
      radio: "",
      switchVal: false,
    };
  },
  // 引入组件
  components: {
    cityPicker,
  },
  methods: {
    // 选择框部分
    // 性别
    sexSelect(e) {
      this.privatesea.sex = e.name;
      this.privatesea.sexid = e.value;
      this.$refs.uForm.validateField("sex");
    },
    // 认证状态
    statusSelect(e) {
      this.privatesea.status = e.name;
      this.privatesea.statusid = e.value;
      this.$refs.uForm.validateField("status");
    },
    // 客户来源
    sourceSelect(e) {
      this.privatesea.source = e.name;
      this.privatesea.sourceid = e.value;
      this.$refs.uForm.validateField("source");
    },
    // 成交状态
    authSelect(e) {
      this.privatesea.auth = e.name;
      this.privatesea.authid = e.value;
      this.$refs.uForm.validateField("auth");
    },

    // 省市区部分
    showAddress() {
      this.visible = true;
    },
    confirm(val) {
      // console.log(val);
      // 拼接地区
      this.privatesea.address =
        val.provinceName + "-" + val.cityName + "-" + val.areaName;
      // 也可直接用
      // this.privatesea.address = val.name;
      this.privatesea.code = val.code;
      // console.log(this.privatesea.code);
      this.visible = false;
    },
    cancel() {
      this.visible = false;
    },

    // 获取客户来源数据
    async getSource() {
      let result = await this.$u.api.manage.getSource();
      if (result && result.code === 1) {
        result.data.forEach((item) => {
          this.sourceList.push({
            name: item.name,
            value: item.id,
          })
        })
      }
    },

    // 提交数据
    onSubmit() {
      this.$refs.uForm
        .validate()
        .then(async () => {
          if (this.privatesea.mobile != '') {
            if (!uni.$u.test.mobile(this.privatesea.mobile)) {
              console.log("手机号格式不正确");
              return;
            }
          }

          let data = {
            adminid: this.admin.id,
            nickname: this.privatesea.nickname,
            email: this.privatesea.email,
            mobile: this.privatesea.mobile,
            password: this.privatesea.password,
            sex: this.privatesea.sexid,
            status: this.privatesea.statusid,
            money: this.privatesea.money,
            source: this.privatesea.sourceid,
            auth: this.privatesea.authid,
            code: this.defaultValue,
          }

          let result = await this.$u.api.manage.PrivateseaAdd(data);

          if (result && result.code === 1) {
            this.$refs.uToast.show({
              type: 'success',
              message: result.msg,
              complete: () => {
                this.$u.route('/pages/manage/privatesea/index');
              },
            })
            return;
          } else {
            this.$refs.uToast.show({
              type: 'error',
              message: result.msg,
            })
            return;
          }

        }).catch((err) => {
          console.log(err);
        });
    },
  },
  onLoad() {
    this.admin = uni.getStorageSync("admin") ?? {};
    this.getSource();
  },
  onReady() {
    //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
    this.$refs.uForm.setRules(this.rules);
  },
};
</script>
